<template>
	<view class="container">
		<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0">
			<scroll-view
				@refresherrefresh="refresh()"
				:refresher-triggered="triggerFresh"
				:refresher-enabled="true"
				:style="{ height: availableHeight + 'px' }"
				scroll-y="true"
				@scrolltolower="lower"
			>
				<view class="order-item" v-for="(item, index) in withthdrawalRecods" :key="index" style="margin-bottom: 30rpx" @tap="detail(item.id)">
					<list-cell :hover="false">
						<view class="w-100">
							单号:
							<text>{{ item.inner_trade_no }}</text>
						</view>
					</list-cell>
					<list-cell :hover="false">
						<view class="w-100 d-flex align-items-center">
							<view class="flex-fill d-flex flex-column">
								<view class="font-size-lg text-color-primary" :style="{ color: getColor(item.status), 'margin-bottom': '20rpx' }">{{ getText(item.status) }}</view>
								<view class="font-size-sm text-color-assist">
									{{ item.create_at }}
								</view>
							</view>
						</view>
					</list-cell>
					<list-cell :hover="false" last>
						<view class="w-100 d-flex flex-column">
							<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx">
								<view class="d-flex font-size-sm text-color-base align-items-center">
									<view style="margin-right: 10rpx">手续费</view>
									<view class="font-size-lg">￥{{ (item.fee / 100).toFixed(2) }}</view>
									&nbsp;&nbsp;
									<view style="margin-right: 10rpx">实收</view>
									<view class="font-size-lg">￥{{ ( item.amount / 100  ).toFixed(2) }}</view>
								</view>
							</view>
						</view>
					</list-cell>
					<list-cell :hover="false" last>
						<view class="w-100" v-if="item.des">备注:{{ item.des }}</view>
					</list-cell>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
import listCell from '../components/list-cell/list-cell';
import { onMounted, ref } from 'vue';

import getWithdrawal from '../../vendor/withdrawal/withdrawal';

const availableHeight = ref(0);
onMounted(() => {
	calHeight();
});
const calHeight = () => {
	uni.getSystemInfo({
		success: function (res) {
			const platform = res.platform;
			const screenHeight = res.windowHeight; // 获取屏幕可用高度
			const statusBarHeight = res.statusBarHeight || 0;
			let navigationBarHeight = 0;
			let toolbarHeight = 0; // 根据你的设计设定

			if (platform === 'ios') {
				navigationBarHeight = 44; // iOS常见导航栏高度
			} else if (platform === 'android') {
				navigationBarHeight = 48; // Android常见导航栏高度
			} else {
				// 其他平台如小程序和H5可以根据实际情况调整
				navigationBarHeight = 44; // 默认导航栏高度
			}

			// 计算可用高度
			availableHeight.value = screenHeight - statusBarHeight - navigationBarHeight - toolbarHeight;
		},
		fail: function (err) {
			console.error('获取系统信息失败:', err);
		}
	});
};
let { withthdrawalRecods, getWithdrawalList, withdrawalPage } = getWithdrawal();
getWithdrawalList();

const lower = () => {
	// 用户数据触底
	getWithdrawalList();
};

const getText = (status: number) => {
	switch (status) {
		case 1:
			return '申请提现';
		case 2:
			return '提现通过';
		case 3:
			return '提现到账';
		case 4:
			return '提现拒绝';
		case 5:
			return '提现失败';
	}
};

const getColor = (status: number) => {
	switch (status) {
		case 1:
			return '#B0BB3F';
		case 2:
			return '#FF0080';
		case 3:
			return '#008080';
		case 4:
			return '#DA0C40';
		case 5:
			return '#DA0C40';
	}
};

const triggerFresh = ref(false);
let isFreshing = false;
const refresh = () => {
	if (isFreshing) return;
	isFreshing = true;
	if (!triggerFresh.value) {
		triggerFresh.value = true;
	}
	withdrawalPage.value = 1;
	withthdrawalRecods.value.length = 0;
	getWithdrawalList(() => {
		triggerFresh.value = false;
		isFreshing = false;
		uni.stopPullDownRefresh();
	});
};
</script>

<style lang="scss" scoped>
@import '@/styles/order_food.scss';
</style>
